<template>
  <pageTabelLayout>
    <template #pageHeader>
      <div class="search-form divClass" v-if="headerShow">
        <a-form size="small" :model="pageData.queryData" layout="inline">
          <a-col :span="8">
            <a-form-item :label-col-flex="pageData.labelColFlex1" label="记录单号">
              <a-input
                @press-enter="selectHandler"
                class="bacClass"
                v-model="pageData.queryData.recordCode"
                allow-clear
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item :label-col-flex="pageData.labelColFlex1" label="开单日期">
              <a-range-picker  popup-container="html" 
                class="bacClass"
                v-model="pageData.queryData.createTimeArr"
                style="width: 439px"
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item :label-col-flex="pageData.labelColFlex1" label="流转卡号">
              <a-input
                @press-enter="selectHandler"
                class="bacClass"
                v-model="pageData.queryData.flowCardCode"
                allow-clear
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item :label-col-flex="pageData.labelColFlex1" label="布号">
              <a-input
                @press-enter="selectHandler"
                class="bacClass"
                v-model="pageData.queryData.greyCode"
                allow-clear
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item :label-col-flex="pageData.labelColFlex1" label="品名">
              <a-input
                @press-enter="selectHandler"
                class="bacClass"
                v-model="pageData.queryData.productName"
                allow-clear
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item :label-col-flex="pageData.labelColFlex1" label="订单号">
              <a-input
                @press-enter="selectHandler"
                class="bacClass"
                v-model="pageData.queryData.orderNumber"
                allow-clear
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item :label-col-flex="pageData.labelColFlex1" label="色号">
              <a-input
                @press-enter="selectHandler"
                class="bacClass"
                v-model="pageData.queryData.colorCode"
                allow-clear
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item :label-col-flex="pageData.labelColFlex1" label="色称">
              <a-input
                @press-enter="selectHandler"
                class="bacClass"
                v-model="pageData.queryData.colorName"
                allow-clear
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item :label-col-flex="pageData.labelColFlex1" label="客户订单号">
              <a-input
                @press-enter="selectHandler"
                class="bacClass"
                v-model="pageData.queryData.clientOrderNumber"
                allow-clear
              />
            </a-form-item>
          </a-col>
        </a-form>
      </div>
      <div class="my-divisders">
        <a-divider orientation="center">
          <icon-double-up
            v-if="headerShow"
            @click="headerShow = false"
            :strokeWidth="2"
            :size="18"
          />
          <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
        </a-divider>
      </div>
      <div class="my-tool-bar">
        <Toolbar
          :items="['查询', '新增', '删除']"
          @audit=""
          @add="addHandler"
          @del="deleteHandler"
          @select="selectHandler"
        >
        </Toolbar>
      </div>
    </template>
    <template #pageTabel>
      <AgGridVuesCopys
        :rowHeight="33"
        :headerHeight="33"
        rowSelection="multiple"
        @grid-ready="gridReady"
        style="height: 100%"
        :defaultColDef="defaultColDef"
        class="ag-theme-alpine"
        :rowData="table.dataList"
        :columnDefs="tc"
        :localeText="localeText1"
        :suppressRowClickSelection="true"
      ></AgGridVuesCopys>
    </template>

    <paginationCopys
      :page-size="pagination.pageSize"
      :current="pagination.page"
      :total="pagination.total"
      show-total
      show-jumper
      show-page-size
      @change="nextDoRefreshPage"
      @page-size-change="nextDoRefreshSize"
      style="justify-content: center"
    />

    <a-drawer
      placement="bottom"
      height="90%"
      :drawer-style="{ zIndex: 9999 }"
      :mask-closable="false"
      :visible="pageData.showAdd"
      unmountOnClose
      @ok="sideOk"
      @cancel="pageData.showAdd = false"
      cancel-text="关闭"
      ok-text="保存"
    >
      <template #title>
        {{ pageData.sideTitle }}
      </template>
      <div>
        <a-form ref="formRef" :model="dataForm" layout="horizontal">
          <a-row :gutter="24">
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="流转卡号"
                field="flowCardCode"
                :validate-trigger="['change', 'blur']"
                :rules="[{ required: true, message: '流转卡号必填' }]"
              >
                <a-input class="bacClass" v-model="dataForm.flowCardCode" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="处理方式"
                field="processMode"
                :validate-trigger="['change', 'blur']"
                :rules="[{ required: true, message: '处理方式必填' }]"
              >
                <a-select popup-container="html"  class="bacClass" v-model="dataForm.processMode">
                  <a-option :value="0">OK</a-option>
                  <a-option :value="1">不OK</a-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="记录单号"
                field="recordCode"
              >
                <a-input class="bacClass" v-model="dataForm.recordCode" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="计划单号"
                field="planOrderCode"
              >
                <a-input class="bacClass" v-model="dataForm.planOrderCode" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="记账员"
                field="bookkeeper"
              >
                <a-input class="bacClass" v-model="dataForm.bookkeeper" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="改色类型"
                field="colorAlteration"
              >
                <a-input class="bacClass" v-model="dataForm.colorAlteration" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item :label-col-flex="pageData.labelColFlex" label="色称" field="colorName">
                <a-input class="bacClass" v-model="dataForm.colorName" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="客户名称"
                field="customName"
              >
                <a-input class="bacClass" v-model="dataForm.customName" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="修改色量"
                field="updateColor"
              >
                <a-input class="bacClass" v-model="dataForm.updateColor" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item :label-col-flex="pageData.labelColFlex" label="色号" field="colorCode">
                <a-input class="bacClass" v-model="dataForm.colorCode" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item :label-col-flex="pageData.labelColFlex" label="重量" field="weight">
                <a-input class="bacClass" v-model="dataForm.weight" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item :label-col-flex="pageData.labelColFlex" label="门幅" field="limit">
                <a-input class="bacClass" v-model="dataForm.limit" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="转处理类型"
                field="turnDispose"
              >
                <a-input class="bacClass" v-model="dataForm.turnDispose" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item :label-col-flex="pageData.labelColFlex" label="匹数" field="houseNum">
                <a-input class="bacClass" v-model="dataForm.houseNum" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item :label-col-flex="pageData.labelColFlex" label="品名" field="productName">
                <a-input class="bacClass" v-model="dataForm.productName" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item :label-col-flex="pageData.labelColFlex" label="克重" field="gramWeight">
                <a-input class="bacClass" v-model="dataForm.gramWeight" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="转换人"
                field="turnPerson"
              >
                <a-select popup-container="html"  class="bacClass"> </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item :label-col-flex="pageData.labelColFlex" label="布号" field="greyCode">
                <a-input class="bacClass" v-model="dataForm.greyCode" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="客户订单号"
                field="clientOrderCode"
              >
                <a-input class="bacClass" v-model="dataForm.clientOrderCode" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="客户订单名称"
                field="clientOrderName"
              >
                <a-input class="bacClass" v-model="dataForm.clientOrderName" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="下单部门"
                field="placeOrder"
              >
                <a-input class="bacClass" v-model="dataForm.placeOrder"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="责任部门"
                field="responsibility"
              >
                <a-select popup-container="html"  class="bacClass"> </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="改染日期"
                field="alterDate"
              >
                <a-date-picker  popup-container="html"  class="bacClass" v-model="dataForm.alterDate" style="width: 100%" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="改染品名"
                field="alterProductName"
              >
                <a-input class="bacClass" v-model="dataForm.alterProductName" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="改染计划单号"
                field="alterOrderCode"
              >
                <a-input class="bacClass" v-model="dataForm.alterOrderCode" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="改染色称"
                field="alterColorName"
              >
                <a-input class="bacClass" v-model="dataForm.alterColorName" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="改染后匹数"
                field="alterHouseNum"
              >
                <a-input class="bacClass" v-model="dataForm.alterHouseNum" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="改染克重"
                field="alterGramWeight"
              >
                <a-input class="bacClass" v-model="dataForm.alterGramWeight" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="改染后重量"
                field="alterweight"
              >
                <a-input class="bacClass" v-model="dataForm.alterweight" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="费用类型"
                field="costType"
              >
                <a-select popup-container="html"  class="bacClass" v-model="dataForm.costType"></a-select>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item :label-col-flex="pageData.labelColFlex" label="单价" field="univalence">
                <a-input class="bacClass" v-model="dataForm.univalence" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item :label-col-flex="pageData.labelColFlex" label="金额" field="money">
                <a-input class="bacClass" v-model="dataForm.money" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="耐氧提示"
                field="reminder"
              >
                <a-input class="bacClass" v-model="dataForm.reminder" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="抗黄处理"
                field="resistYellow"
              >
                <a-input class="bacClass" v-model="dataForm.resistYellow" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="退仓仓库"
                field="entrepot"
              >
                <a-select popup-container="html"  class="bacClass"> </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item :label-col-flex="pageData.labelColFlex" label="处理类型">
                <a-checkbox v-model="dataForm.enterVat">进缸</a-checkbox>
                <a-checkbox v-model="dataForm.charge">收染费</a-checkbox>
                <a-checkbox v-model="dataForm.discharge">拨印</a-checkbox>
                <a-checkbox v-model="dataForm.wetBrush">湿刷</a-checkbox>
                <a-checkbox v-model="dataForm.rcProcess">RC处理</a-checkbox>
                <a-checkbox v-model="dataForm.antiseize">防沾处理</a-checkbox>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="原因分析"
                field="causeAnalyse"
              >
                <a-textarea class="bacClass" v-model="dataForm.causeAnalyse" />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="登记原因"
                field="registerCause"
              >
                <a-textarea class="bacClass" v-model="dataForm.registerCause" />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item :label-col-flex="pageData.labelColFlex" label="改善措施" field="measure">
                <a-textarea class="bacClass" v-model="dataForm.measure" />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-drawer>
  </pageTabelLayout>
</template>

<script lang="ts">
  import { post, get } from '@/api/http'
  import { useTable, usePagination, useTableColumn } from '@/hooks/table'

  import { ref, reactive, onMounted } from 'vue'
  import Toolbar from '@/components/Toolbar.vue'
  import { Message, Modal } from '@arco-design/web-vue'
  import { FormInstance } from '@arco-design/web-vue/es/form'
  import 'ag-grid-community/styles/ag-grid.css'
  import 'ag-grid-community/styles/ag-theme-alpine.css'
  import { localeText } from '@/api/aggridZw'
  

  interface paramData {
    id: any
    recordCode: string | undefined //记录单号
    planOrderCode: string | undefined //计划单号
    bookkeeper: string | undefined //记账员
    colorAlteration: string | undefined //改色类型
    flowCardCode: string | undefined //流转卡号
    billingDate: string | undefined //开单日期(默认新增时时间)
    colorName: string | undefined //色称
    customName: string | undefined //客户名称
    updateColor: string | undefined //修改色量（数字整型）
    colorCode: string | undefined //色号
    weight: any //重量（保留两位小数）
    limit: string | undefined //门幅
    turnDispose: string | undefined //转处理类型
    houseNum: any //匹数（整型）
    productName: string | undefined //品名
    gramWeight: any //克重（保留两位小数）
    turnPerson: string | undefined //转换人
    greyCode: string | undefined //布号
    clientOrderCode: string | undefined //客户定单号
    clientOrderName: string | undefined //客户订单名称
    auditPerson: string | undefined //审核人
    auditState: any //审核状态-默认0未审核,1已审核
    auditDate: string | undefined //审核日期
    placeOrder: string | undefined //下单部门
    alterCardCode: string | undefined //改染流转卡号
    responsibility: string | undefined //责任部门
    alterDate: string | undefined //改染日期
    alterProductName: string | undefined //改染品名
    alterOrderCode: string | undefined //改染计划单号
    alterGreyCode: string | undefined //改染布号
    alterColorName: string | undefined //改染色称
    alterHouseNum: any //改染后匹数（整型）
    againAuditPerson: string | undefined //复审人
    againAuditDate: string | undefined //复审日期
    alterColorCode: string | undefined //改染色号
    alterGramWeight: any //改染克重（保留两位小数）
    alterweight: any //改染后重量（保留两位小数）
    alterLimit: string | undefined //改染门幅
    costType: string | undefined //费用类型
    processMode: string | undefined //处理方式
    enterVat: any //进缸-0是不勾选,1是勾选
    charge: any //收染费-0是不勾选,1是勾选
    discharge: any //拔印-0是不勾选,1是勾选
    wetBrush: any //湿刷-0是不勾选,1是勾选
    rcProcess: any //RC处理-0是不勾选,1是勾选
    antiseize: any //防粘处理-0是不勾选,1是勾选
    univalence: any //单价
    reminder: string | undefined //耐氯提示
    resistYellow: string | undefined //抗黄处理
    causeAnalyse: string | undefined //原因分析
    money: any //金额（保留两位小数）
    grade: string | undefined //等级
    measure: string | undefined //改善措施
    entrepot: string | undefined //退仓仓库
    registerCause: string | undefined //登记原因
    remark: string | undefined //备注
  }

  export default {
    //改黑作业
    name: 'BlackoutOperation',
    setup() {
      //隐藏显示头部
      const headerShow = ref<boolean>(true)
      const pageData = reactive<{
        showAdd: boolean
        sideTitle: string
        dropDownData: any
        pageLoading: boolean
        theight: number
        rHeight: number | undefined
        labelColFlex: string
        queryData: any
        labelColFlex1: string
      }>({
        showAdd: false,
        sideTitle: '新增改黑作业',
        dropDownData: '',
        pageLoading: false,
        theight: 0,
        rHeight: 0,
        labelColFlex: '150px',
        queryData: {
          flowCardCode: '',
          createTimeArr: [],
          greyCode: '',
          recordCode: '',
          productName: '',
          deleteState: 0,
          orderNumber: '',
          colorCode: '',
          colorName: '',
          clientOrderNumber: '',
        },
        labelColFlex1: '80px',
      })
      //查询列表
      onMounted(() => {
        selectHandler()
      })

      //切换分页
      const nextDoRefreshPage = (val: any) => {
        pagination.page = val
        doRefresh()
      }
      const nextDoRefreshSize = (val: any) => {
        pagination.pageSize = val
        doRefresh()
      }
      const pagination = usePagination(doRefresh)
      const table = useTable()
      function doRefresh() {
        pageData.pageLoading = true
        pageData.queryData.page = pagination.page
        pageData.queryData.size = pagination.pageSize
        if (pageData.queryData.createTimeArr == undefined) {
          pageData.queryData.createTimeArr = []
        }
        pageData.queryData.startDate = pageData.queryData.createTimeArr[0]
        pageData.queryData.endDate = pageData.queryData.createTimeArr[1]
        post({
          url: 'dwQms/DarkAssignment/getPage',
          data: pageData.queryData,
        })
          .then(({ data, code }: any) => {
            if (code === 200) {
              table.handleSuccess(data.data)
              pagination.setTotalSize(data.total)
              gridOption.value.setRowData(data.data)
            }
          })
          .catch(console.log)
          .finally(() => {
            pageData.pageLoading = false
          })
      }
      //查询
      const selectHandler = () => {
        pagination.page = 1
        doRefresh()
      }
      //------新增、修改页面开始------
      const dataForm = reactive<paramData>({
        id: null,
        recordCode: '', //记录单号
        planOrderCode: '', //计划单号
        bookkeeper: '', //记账员
        colorAlteration: '', //改色类型
        flowCardCode: '', //流转卡号
        billingDate: '', //开单日期(默认新增时时间)
        colorName: '', //色称
        customName: '', //客户名称
        updateColor: '', //修改色量（数字整型）
        colorCode: '', //色号
        weight: 0, //重量（保留两位小数）
        limit: '', //门幅
        turnDispose: '', //转处理类型
        houseNum: 0, //匹数（整型）
        productName: '', //品名
        gramWeight: 0, //克重（保留两位小数）
        turnPerson: '', //转换人
        greyCode: '', //布号
        clientOrderCode: '', //客户定单号
        clientOrderName: '', //客户订单名称
        auditPerson: '', //审核人
        auditState: 0, //审核状态-默认0未审核,1已审核
        auditDate: '', //审核日期
        placeOrder: '', //下单部门
        alterCardCode: '', //改染流转卡号
        responsibility: '', //责任部门
        alterDate: '', //改染日期
        alterProductName: '', //改染品名
        alterOrderCode: '', //改染计划单号
        alterGreyCode: '', //改染布号
        alterColorName: '', //改染色称
        alterHouseNum: 0, //改染后匹数（整型）
        againAuditPerson: '', //复审人
        againAuditDate: '', //复审日期
        alterColorCode: '', //改染色号
        alterGramWeight: 0, //改染克重（保留两位小数）
        alterweight: 0, //改染后重量（保留两位小数）
        alterLimit: '', //改染门幅
        costType: '', //费用类型
        processMode: '', //处理方式
        enterVat: false, //进缸-0是不勾选,1是勾选
        charge: false, //收染费-0是不勾选,1是勾选
        discharge: false, //拔印-0是不勾选,1是勾选
        wetBrush: false, //湿刷-0是不勾选,1是勾选
        rcProcess: false, //RC处理-0是不勾选,1是勾选
        antiseize: false, //防粘处理-0是不勾选,1是勾选
        univalence: 0, //单价
        reminder: '', //耐氯提示
        resistYellow: '', //抗黄处理
        causeAnalyse: '', //原因分析
        money: 0, //金额（保留两位小数）
        grade: '', //等级
        measure: '', //改善措施
        entrepot: '', //退仓仓库
        registerCause: '', //登记原因
        remark: '',
      })
      const addHandler = () => {
        for (var key in dataForm) {
          if (key === 'id') {
            dataForm[key] = null
          } else if (
            key === 'enterVat' ||
            key === 'charge' ||
            key === 'discharge' ||
            key === 'wetBrush' ||
            key === 'rcProcess' ||
            key === 'antiseize'
          ) {
            dataForm[key] = false
          } else {
            dataForm[key] = ''
          }
        }
        pageData.showAdd = true
        pageData.sideTitle = '新增改黑作业'
      }
      const editHandler = (record: paramData) => {
        for (var key in record) {
          if (
            key === 'enterVat' ||
            key === 'charge' ||
            key === 'discharge' ||
            key === 'wetBrush' ||
            key === 'rcProcess' ||
            key === 'antiseize'
          ) {
            record[key] = record[key] == '1' ? true : false
          }
          dataForm[key] = record[key]
        }
        pageData.sideTitle = '修改改黑作业'
        pageData.showAdd = true
      }

      const formRef = ref<FormInstance>()
      const sideOk = () => {
        formRef.value?.validate().then((err) => {
          if (!err) {
            for (var key in dataForm) {
              if (
                key === 'enterVat' ||
                key === 'charge' ||
                key === 'discharge' ||
                key === 'wetBrush' ||
                key === 'rcProcess' ||
                key === 'antiseize'
              ) {
                dataForm[key] = dataForm[key] == true ? '1' : '0'
              }
            }
            if (pageData.sideTitle === '新增改黑作业') {
              post({
                url: 'dwQms/DarkAssignment/insert',
                data: [dataForm],
              }).then((res: any) => {
                if (res.code === 200) {
                  formRef.value?.resetFields()

                  pageData.showAdd = false

                  Message.success({
                    content: '新增成功',
                    duration: 5000,
                  })
                  doRefresh()
                } else {
                  Message.error({
                    content: res.message,
                    duration: 5000,
                  })
                }
              })
            } else {
              post({
                url: 'dwQms/DarkAssignment/update',
                data: [dataForm],
              }).then((res: any) => {
                if (res.code === 200) {
                  formRef.value?.resetFields()
                  pageData.showAdd = false

                  Message.success({
                    content: '修改成功',
                    duration: 5000,
                  })
                  doRefresh()
                } else {
                  Message.error({
                    content: res.message,
                    duration: 5000,
                  })
                }
              })
            }
          }
        })
      }
      //------新增、修改页面结束------
      //------删除方法开始------
      const deleteHandler = () => {
        if (gridOption.value.getSelectedRows().length === 0) {
          return
        }
        Modal.confirm({
          title: '系统提示',
          content: '确认删除选中的数据?',
          onOk() {
            post({
              url: 'dwQms/DarkAssignment/delete',
              data: gridOption.value.getSelectedRows().map((o: any) => {
                return o.id
              }),
            }).then(({ code, data }: any) => {
              if (code === 200) {
                Message.success({
                  content: '删除成功',
                  duration: 5000,
                })

                pagination.page = 1
                doRefresh()
              } else {
                Message.error({
                  content: '删除失败',
                  duration: 5000,
                })
              }
            })
          },
        })
      }
      //------删除方法结束------

      // 表格准备事件
      const tableColumns = useTableColumn([
        {
          title: '系统编号',
          key: 'id',
          dataIndex: 'id',
          width: 150,
        },
        {
          title: '记录单号',
          key: 'recordCode',
          dataIndex: 'recordCode',
        },
        {
          title: '开单日期',
          key: 'billingDate',
          dataIndex: 'billingDate',
        },
        {
          title: '记账员',
          key: 'bookkeeper',
          dataIndex: 'bookkeeper',
        },
        {
          title: '流转卡号',
          key: 'flowCardCode',
          dataIndex: 'flowCardCode',
        },
        {
          title: '客户订单号',
          key: 'clientOrderCode',
          dataIndex: 'clientOrderCode',
        },
        {
          title: '下单部门',
          key: 'placeOrder',
          dataIndex: 'placeOrder',
        },
        {
          title: '计划单号',
          key: 'planOrderCode',
          dataIndex: 'planOrderCode',
        },

        {
          title: '客户名称',
          key: 'customName',
          dataIndex: 'customName',
        },
        {
          title: '布号',
          key: 'greyCode',
          dataIndex: 'greyCode',
        },
        {
          title: '品名',
          key: 'productName',
          dataIndex: 'productName',
        },
        {
          title: '色号',
          key: 'colorCode',
          dataIndex: 'colorCode',
        },

        {
          title: '色称',
          key: 'colorName',
          dataIndex: 'colorName',
        },
        {
          title: '门幅',
          key: 'limit',
          dataIndex: 'limit',
        },
        {
          title: '克重',
          key: 'weight',
          dataIndex: 'weight',
        },
        {
          title: '匹数',
          key: 'houseNum',
          dataIndex: 'houseNum',
        },

        {
          title: '操作',
          key: 'id',
          dataIndex: 'id',
          slotName: 'act',
          width: 150,
          fixed: 'right',
        },
      ])
      const gridOption = ref()
      const gridReady = (params: any) => {
        gridOption.value = params.api
      }
      const defaultColDef = {
        sortable: true,
        resizable: true,
        filter: true,
        // flex: 1
      }
      let tc: any[] = tableColumns.map((o) => {
        let obj = {
          headerName: o.title,
          field: o.key,
          pinned: o['fixed'],
          width: o.width,
        }
        if (o.slotName === 'act') {
          obj['resizable'] = false
          obj['filter'] = false
          obj['sortable'] = false
          obj['lockPosition'] = o.fixed
          obj['cellRenderer'] = {
            template: `<el-button style="color:#165dff;" link @click="a">修改</el-button>`,
            setup(props: any) {
              const a = () => {
                editHandler(props.params.data)
              }
              return {
                a,
              }
            },
          }
        }
        return obj
      })
      let a = [
        {
          showRowGroup: 'hide_def',
          headerName: '',
          checkboxSelection: true,
          headerCheckboxSelection: true,
          pinned: 'left',
          width: 50,
          resizable: false,
          filter: false,
          sortable: false,
          minWidth: 50,
          maxWidth: 50,
          lockPosition: 'left',
        },
      ]
      tc = a.concat(tc)
      const localeText1: any = ref(localeText)

      const search = () => {
        post({
          url: 'aps/circulatCard/getList',
          data: {
            flowCardCode: dataForm.flowCardCode,
          },
        }).then(({ data, code }: any) => {
          if (code === 200) {
            if (data.length == 0) {
              Message.error({
                content: '该缸号不存在',
                duration: 5000,
              })
            }
            dataForm.planOrderCode = data[0].planOrderCode
            dataForm.customName = data[0].customName
            dataForm.productName = data[0].productName
            dataForm.greyCode = data[0].greyCode
            dataForm.clientOrderCode = data[0].clientOrderCode
            dataForm.clientOrderName = data[0].clientOrderName
            dataForm.placeOrder = data[0].placeOrder
          }
        })
      }
      return {
        deleteHandler,
        sideOk,
        formRef,
        dataForm,
        addHandler,
        pagination,
        table,
        pageData,
        editHandler,
        selectHandler,
        headerShow,
        nextDoRefreshPage,
        nextDoRefreshSize,
        defaultColDef,
        localeText1,
        tc,
        gridReady,
        gridOption,
        search,
      }
    },
    components: { Toolbar,  },
  }
</script>
<style scoped lang="less">
  :deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
  }

  :deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
  }

  :deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
  }
</style>
